<template>
    <div id="app">
        <h3 class="grey">vue2 <button @click="update">更新组件</button></h3>

        <div class="flex-line">
            <label>数组</label>
            <div>
                <button @click="setDefault('arr')">恢复数组</button>
                <button @click="setLengthZero">设置长度为0</button>
                <button @click="arrHandle('push')">push</button>
                <button @click="arrHandle('RealPush')">RealPush</button>
                <button @click="arrHandle('pop')">pop</button>
                <button @click="arrHandle('RealPop')">RealPop</button>
                <div>当前数组：{{ arr }}</div>
            </div>
        </div>

        <div class="flex-line">
            <label>对象</label>
            <div>
                <button @click="setDefault('obj')">恢复对象</button>
                <button @click="setProp()">设置age属性</button>
                <button @click="setProp(true)">$set设置age属性</button>
                <button @click="setChildProp">更改对象属性</button>
                <button @click="deleteProp()">删除对象属性</button>
                <button @click="deleteProp(true)">$delete删除对象属性</button>
                <button @click="inHandler">in操作符</button>
                <div>当前对象：{{ obj }}</div>
            </div>
        </div>
    </div>
</template>

<script>
import * as arr from "./utils/arr";
import * as obj from "./utils/obj";
const { defaultArr, ...arrMethods } = arr;
const { defaultObj, ...objMethods } = obj;
let methods = { ...arrMethods, ...objMethods };
export default {
    name: "App",
    data() {
        return {
            arr: [...defaultArr],
            obj: JSON.parse(JSON.stringify(defaultObj)),
        };
    },
    methods: {
        ...methods,
        update() {
            this.$forceUpdate();
        },
        setDefault(type) {
            this[type] = JSON.parse(
                JSON.stringify(
                    eval(`default${type.replace(/^\w/, (_) => _.toUpperCase())}`)
                )
            );
        },
    },
    beforeCreate() {
        for (const key in methods) {
            methods[key] = methods[key].bind(this);
        }
    },
};
</script>
